<template>
	<view class="shop-page">
		<!-- 头部信息 -->
		<view class="header">
			<view class="shop-info">
				<image class="shop-logo" :src="shopInfo.logo" mode="aspectFill"></image>
				<view class="shop-detail">
					<view class="shop-name">{{ shopInfo.name }}</view>
					<view class="shop-desc">{{ shopInfo.desc }}</view>
					<view class="shop-fee">配送费¥{{ shopInfo.deliveryFee }} 起送¥{{ shopInfo.minOrderAmount }}</view>
				</view>
			</view>
			<view class="status" :style="{backgroundColor: shopInfo.statusColor}">{{ shopInfo.status }}</view>
		</view>

		<!-- 分类和商品列表 -->
		<view class="content">
			<!-- 左侧分类 -->
			<view class="category-list">
				<view v-for="(category, index) in categories" :key="category.id || index" class="category-item"
					:class="{ active: currentCategory === index }" @click="handleCategoryChange(index)">
					{{ category.categoryName }}
				</view>
			</view>

			<!-- 右侧商品列表 -->
			<view class="goods-container">
				<view v-if="loading" class="loading">加载中...</view>
				<view v-else class="goods-list">
					<view v-for="(goods, goodsIndex) in currentGoodsList" :key="goods.id || goodsIndex"
						class="goods-item">
						<image class="goods-img" :src="goods.thumbnail || goods.images || '/static/image/default.png'"
							mode="aspectFill"></image>
						<view class="goods-details">
							<view class="goods-name">{{ goods.productName }}</view>
							<view class="goods-price-info">
								<text class="goods-vip-price" v-if="goods.vipPrice">
									会员价: ¥{{ goods.vipPrice?.toFixed(2) }}
								</text>
								<text class="goods-original-price">
									原价: ¥{{ goods.price?.toFixed(2) }}
								</text>
							</view>
						</view>
						<view class="quantity-control-smaller">
							<button class="btn-circle-minus" :disabled="goods.cartQuantity <= 0"
								@click="decrement(goodsIndex, goods.id)">-</button>
							<view class="quantity-smaller">{{ goods.cartQuantity || 0 }}</view>
							<button class="btn-circle-plus" :disabled="goods.cartQuantity >= goods.quantity"
								@click="increment(goodsIndex, goods.id, goods.thumbnail || goods.images || '/static/image/default.png')">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部结算 -->
		<view class="footer">
			<view class="cart-info">
				<van-badge :content="cartCount" max="99" class="cart-badge-outer">
					<van-icon name="cart-o" size="48rpx" color="#fff" class="cart-icon" />
				</van-badge>
				<view class="total-info">
					<view class="total-price-wrapper" v-if="totalVipPrice > 0">
						<view class="total-price-title">会员价总计</view>
						<view class="total-price-value">¥{{ totalVipPrice.toFixed(2) }}</view>
					</view>
					<view class="total-original-price-wrapper">
						<view class="total-original-price-title">原价总计</view>
						<view class="total-original-price-value">¥{{ totalOriginalPrice.toFixed(2) }}</view>
					</view>
				</view>
			</view>
			<button class="settle-btn-left" @click="handleSettle">立即结算</button>
			<!-- 购物车徽章已整合到van-badge中 -->
		</view>

		<!-- 添加商品动画元素 -->
		<view v-if="isAnimating" class="floating-item" :style="{
			left: startX + 'px',
			top: startY + 'px',
			opacity: animationOpacity,
			transform: `translate(${translateX}px, ${translateY}px) scale(${animationScale})`
		}">
			<image :src="animateImage" mode="aspectFill" class="animate-image" />
		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch,
		reactive,
		nextTick
	} from 'vue';

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getShopDelivery,
		getProductsByCategoryAndBuilding
	} from '@/package/api/selList.js';

	// 店铺信息
	const shopInfo = ref({
		logo: 'https://paole.hebeixiaoyu.cn/run/profile/upload/sushechaoshi.png',
		name: '宿舍超市',
		desc: '可送达宿舍',
		deliveryFee: 1,
		minOrderAmount: 15,
		status: '营业中',
		statusColor: 'orange'
	});

	// 分类数据
	const categories = ref([]);
	const currentCategory = ref(0);
	const loading = ref(false);
	const goodsData = ref([]);

	// 购物车相关
	const cartState = reactive({
		items: []
	});
	const cartCount = ref(0);
	const CART_STORAGE_KEY = 'shop_cart';
	const CART_QUANTITY_KEY = 'cart_quantity';

	// 动画相关
	const isAnimating = ref(false);
	const animateImage = ref('');
	const startX = ref(0);
	const startY = ref(0);
	const translateX = ref(0);
	const translateY = ref(0);
	const animationOpacity = ref(1);
	const animationScale = ref(1);
	const cartPosition = ref({
		x: 0,
		y: 0
	});
	let animationId = null;
	const cartBadge = ref(null); // 新增：购物车徽章引用

	// 获取本地存储数据
	const uniGetStorage = (key) => {
		try {
			return uni.getStorageSync(key);
		} catch (error) {
			console.error(`获取本地存储 ${key} 失败`, error);
			return null;
		}
	};

	// 保存本地存储数据
	const uniSetStorage = (key, value) => {
		try {
			uni.setStorageSync(key, value);
			return true;
		} catch (error) {
			console.error(`保存本地存储 ${key} 失败`, error);
			return false;
		}
	};

	// 显示提示信息
	const uniToast = (title, icon = 'success', duration = 1500) => {
		uni.showToast({
			title,
			icon,
			duration
		});
	};

	// 获取楼栋ID
	const getBuildingId = () => {
		try {
			const selectedBuilding = uniGetStorage('selectedBuilding');
			return selectedBuilding || null;
		} catch (error) {
			console.error('获取楼栋ID失败:', error);
			return null;
		}
	};

	// 加载商品数据
	const loadGoodsData = async (categoryId, buildingId) => {
		console.log("---------------------");
		loading.value = true;
		try {
			const params = {
				categoryId,
				buildingId: buildingId?.id || null
			};

			const response = await getProductsByCategoryAndBuilding(params);
			console.log(response);
			if (response.code === 200 && response.data) {
				goodsData.value = response.data.map(item => ({
					...item,
					cartQuantity: 0,
					quantity: item.quantity || 0,
					price: item.price,
					vipPrice: item.vipPrice,
					categoryName: item.categoryName || item.productCategory?.categoryName || '未分类'
				}));
				console.log('商品数据加载成功', goodsData.value);
				loadCartFromStorage();
			} else {
				goodsData.value = [];
				uniToast('获取商品数据失败', 'none');
			}
		} catch (error) {
			goodsData.value = [];
			console.error('获取商品数据异常', error);
			uniToast('网络错误，请稍后再试', 'none');
		} finally {
			loading.value = false;
		}
	};

	// 从本地存储加载购物车数据
	const loadCartFromStorage = () => {
		const storedCart = uniGetStorage(CART_STORAGE_KEY);
		if (storedCart && Array.isArray(storedCart)) {
			console.log('加载购物车数据:', storedCart);
			cartState.items = storedCart;
			updateCartQuantityToGoods();
			updateCartCount();
		} else {
			cartState.items = [];
			resetCartQuantity();
			uniSetStorage(CART_QUANTITY_KEY, 0);
			cartCount.value = 0;
		}
	};

	// 保存购物车数据到本地存储
	const saveCartToStorage = () => {
		const validItems = cartState.items.filter(item => item.quantity > 0);
		uniSetStorage(CART_STORAGE_KEY, validItems);
		const totalQuantity = validItems.reduce((sum, item) => sum + item.quantity, 0);
		uniSetStorage(CART_QUANTITY_KEY, totalQuantity);
		cartCount.value = totalQuantity;
	};

	// 更新商品中的购物车数量
	const updateCartQuantityToGoods = () => {
		const cartMap = new Map(cartState.items.map(item => [item.id, item.quantity]));
		goodsData.value.forEach(goods => {
			goods.cartQuantity = cartMap.get(goods.id) || 0;
		});
	};

	// 重置商品中的购物车数量
	const resetCartQuantity = () => {
		goodsData.value.forEach(goods => {
			goods.cartQuantity = 0;
		});
	};

	// 更新购物车计数
	const updateCartCount = () => {
		cartCount.value = cartState.items.reduce((sum, item) => sum + item.quantity, 0);
	};

	// 当前分类商品列表
	const currentGoodsList = computed(() => {
		const categoryId = categories.value[currentCategory.value]?.id;
		return goodsData.value.filter(item =>
			Number(item.categoryId) === Number(categoryId)
		);
	});

	// 计算会员价总价格（仅当存在会员价时计算）
	const totalVipPrice = computed(() => {
		return currentGoodsList.value.reduce((sum, item) => {
			const count = item.cartQuantity;
			const usePrice = item.vipPrice ? item.vipPrice : 0;
			return sum + (usePrice?.toFixed(2) * count);
		}, 0);
	});

	// 计算原价总价格
	const totalOriginalPrice = computed(() => {
		return currentGoodsList.value.reduce((sum, item) => {
			const count = item.cartQuantity;
			return sum + (item.price?.toFixed(2) * count);
		}, 0);
	});

	// 分类切换处理
	const handleCategoryChange = (index) => {
		currentCategory.value = index;
		const categoryId = categories.value[index]?.id;
		const buildingId = getBuildingId();
		console.log('分类ID:', categoryId, '楼栋对象:', buildingId);
		if (categoryId && buildingId) {
			loadGoodsData(categoryId, buildingId);
		}
	};

	// 数量操作（使用商品ID）
	const increment = (goodsIndex, goodsId, imageUrl) => {
		if (currentGoodsList.value[goodsIndex]) {
			const goods = currentGoodsList.value[goodsIndex];
			if (goods.cartQuantity < goods.quantity) {
				goods.cartQuantity++;
				updateCartState(goods);
				uniToast(`已添加 ${goods.productName}`, 'success');
				showAddAnimation(goodsIndex, imageUrl);
			} else {
				uniToast('已达到库存上限', 'none');
			}
		}
	};

	const decrement = (goodsIndex, goodsId) => {
		if (currentGoodsList.value[goodsIndex] && currentGoodsList.value[goodsIndex].cartQuantity > 0) {
			currentGoodsList.value[goodsIndex].cartQuantity--;
			updateCartState(currentGoodsList.value[goodsIndex]);
		}
	};

	// 显示添加动画
	const showAddAnimation = (goodsIndex, imageUrl) => {
		// 获取商品位置
		const query = uni.createSelectorQuery();
		query.select(`.goods-item:nth-child(${goodsIndex + 1}) .goods-img`).boundingClientRect(rect => {
			if (rect) {
				startX.value = rect.left + rect.width / 2;
				startY.value = rect.top + rect.height / 2;
				animateImage.value = imageUrl;
				isAnimating.value = true;

				nextTick(() => {
					// 获取购物车位置（包括徽章）
					const cartQuery = uni.createSelectorQuery();
					cartQuery.select('.cart-icon').boundingClientRect(cartRect => {
						if (cartRect) {
							// 计算购物车图标的中心位置
							cartPosition.value = {
								x: cartRect.left + cartRect.width / 2,
								y: cartRect.top + cartRect.height / 2
							};

							// 获取购物车徽章位置（如果有）
							cartQuery.select('.van-badge__content').boundingClientRect(
								badgeRect => {
									const targetX = badgeRect ?
										cartRect.left + cartRect.width / 2 + (badgeRect
											.right - cartRect.right) :
										cartRect.left + cartRect.width / 2;
									const targetY = badgeRect ?
										cartRect.top + cartRect.height / 2 - (cartRect
											.height / 2) :
										cartRect.top + cartRect.height / 2;

									// 计算动画位移
									const dx = targetX - startX.value;
									const dy = targetY - startY.value;
									const duration = 800; // 动画持续时间
									const startTime = Date.now();

									// 执行动画
									const animate = () => {
										const elapsed = Date.now() - startTime;
										if (elapsed < duration) {
											const progress = elapsed / duration;
											// 使用二次贝塞尔曲线增强动画效果
											const easedProgress = progress * (2 -
												progress);
											translateX.value = dx * easedProgress;
											translateY.value = dy * easedProgress;
											// 中途缩小并透明
											animationScale.value = 1 - easedProgress *
												0.6;
											animationOpacity.value = 1 -
												easedProgress * 0.3;
											animationId = requestAnimationFrame(
												animate);
										} else {
											endAnimation();
										}
									};
									animationId = requestAnimationFrame(animate);
								}).exec();
						}
					}).exec();
				});
			}
		}).exec();
	};

	// 动画结束处理
	const endAnimation = () => {
		isAnimating.value = false;
		translateX.value = 0;
		translateY.value = 0;
		animationScale.value = 1;
		animationOpacity.value = 1;
		animateImage.value = '';

		// 购物车图标抖动效果
		const cart = document.querySelector('.cart-icon');
		if (cart) {
			cart.classList.add('pulse'); // 添加脉冲动画
			setTimeout(() => {
				cart.classList.remove('pulse');
			}, 500);
		}
	};

	// 更新购物车状态
	const updateCartState = (goods) => {
		const index = cartState.items.findIndex(item => item.id === goods.id);
		if (goods.cartQuantity > 0) {
			if (index !== -1) {
				cartState.items[index].quantity = goods.cartQuantity;
			} else {
				cartState.items.push({
					id: goods.id,
					quantity: goods.cartQuantity,
					price: goods.price,
					vipPrice: goods.vipPrice,
					isVipPrice: goods.isVipPrice,
					productName: goods.productName
				});
			}
		} else if (index !== -1) {
			cartState.items.splice(index, 1);
		}
		saveCartToStorage();
	};

	// 结算逻辑
	const handleSettle = () => {
		// 会员总价和原价总价
		const vipTotal = totalVipPrice.value > 0 ? totalVipPrice.value : 0;
		const originalTotal = totalOriginalPrice.value;

		console.log('会员总价:', vipTotal);
		console.log('原价总价:', originalTotal);

		// 使用会员价或原价作为结算总价
		const total = vipTotal > 0 ? vipTotal : originalTotal;

		// 检查是否达到起送金额
		if (total < shopInfo.value.minOrderAmount) {
			uniToast(`起送价为¥${shopInfo.value.minOrderAmount}，当前金额不足`, 'none');
			return;
		}

		// 检查是否有选中商品
		const selectedGoods = currentGoodsList.value.filter(goods => goods.cartQuantity > 0);
		if (selectedGoods.length === 0) {
			uniToast('请选择商品', 'none');
			return;
		}

		// 判断原价是否超过配送费
		const deliveryFee = shopInfo.value.deliveryFee;
		const isOriginalPriceOverDeliveryFee = originalTotal >= deliveryFee;

		console.log('原价是否超过配送费:', isOriginalPriceOverDeliveryFee);

		// 准备结算数据
		const settlementData = {
			vipTotal,
			originalTotal,
			total,
			isOriginalPriceOverDeliveryFee,
			selectedGoods
		};

		// 可以在这里根据需要使用结算数据，例如传递给结算页面
		console.log('结算数据:', settlementData);

		// 显示结算提示，可以根据条件定制提示内容
		if (isOriginalPriceOverDeliveryFee) {
			uniToast('即将结算，原价已超过配送费', 'success');

			// 跳转到结算页面或执行其他结算操作
			uni.navigateTo({
				url: '/package/pages/cart/cart'
			});
		} else {
			uniToast('即将结算，原价未达到配送费金额', 'success');
		}


	};

	// 页面加载时获取数据
	onMounted(async () => {
		// 获取配送费用
		try {
			const deliveryRes = await getShopDelivery();
			console.log('配送费用响应:', deliveryRes);
			if (deliveryRes.code === 200 && deliveryRes.data) {
				shopInfo.value = {
					...shopInfo.value,
					deliveryFee: deliveryRes.data.deliveryFee || 2,
					minOrderAmount: deliveryRes.data.minOrderAmount || 15
				};

				// 将配送费存储到本地存储中
				uni.setStorageSync('deliveryFee', deliveryRes.data.deliveryFee);
			}
		} catch (error) {
			console.error('获取配送费用失败', error);
			uniToast('获取配送费用失败，请稍后再试', 'none');
		}

		// 加载分类数据
		try {
			const classify = uniGetStorage('classify');
			if (classify && classify.length > 0) {
				categories.value = classify.map(item => ({
					id: item.id || Date.now(),
					categoryName: item.categoryName || item.name || '未命名分类'
				}));
			} else {
				// categories.value = [{
				// 		id: 1,
				// 		categoryName: '零食'
				// 	},
				// 	{
				// 		id: 2,
				// 		categoryName: '酒水饮料'
				// 	},
				// 	{
				// 		id: 3,
				// 		categoryName: '方便速食'
				// 	},
				// 	{
				// 		id: 4,
				// 		categoryName: '日用品'
				// 	}
				// ];
			}

			// 加载商品数据
			const categoryId = categories.value[currentCategory.value]?.id;
			const buildingId = getBuildingId();
			if (categoryId && buildingId) {
				loadGoodsData(categoryId, buildingId);
			}
		} catch (error) {
			console.error('获取分类数据失败:', error);
			// categories.value = [{
			// 		id: 1,
			// 		categoryName: '零食'
			// 	},
			// 	{
			// 		id: 2,
			// 		categoryName: '酒水饮料'
			// 	},
			// 	{
			// 		id: 3,
			// 		categoryName: '方便速食'
			// 	},
			// 	{
			// 		id: 4,
			// 		categoryName: '日用品'
			// 	}
			// ];
		}
	})

	// 页面显示时重新加载数据
	onShow(async () => {
		const buildingId = getBuildingId();
		if (buildingId) {
			const categoryId = categories.value[currentCategory.value]?.id;
			if (categoryId) {
				loadGoodsData(categoryId, buildingId);
			}
		}
	})

	// 监听分类变化
	watch(currentCategory, (newVal) => {
		const categoryId = categories.value[newVal]?.id;
		const buildingId = getBuildingId();
		if (categoryId && buildingId) {
			loadGoodsData(categoryId, buildingId);
		}
	})

	// 监听商品数据变化，同步购物车数量
	watch(goodsData, (newGoods) => {
		if (newGoods && newGoods.length > 0) {
			loadCartFromStorage();
		}
	}, {
		deep: true
	})
</script>

<style scoped>
	/* 基础样式保持不变，新增购物车动画样式 */
	.shop-page {
		width: 100%;
		background-color: #DCEAFF;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
		background-color: #FFFFFF;
		margin: 0 5px 10px 5px;
		border-radius: 10px;
	}

	.shop-info {
		display: flex;
		align-items: center;
	}

	.shop-logo {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-right: 15px;
	}

	.shop-detail {
		display: flex;
		flex-direction: column;
	}

	.shop-name {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.shop-desc {
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.shop-fee {
		font-size: 14px;
		color: #999;
	}

	.status {
		padding: 5px 10px;
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
	}

	.content {
		display: flex;
		height: calc(100vh - 240px);
	}

	.category-list {
		width: 30%;
		border-right: 1px solid #f5f5f5;
		overflow-y: auto;
		background-color: #F5F5F5;
	}

	.category-item {
		padding: 15px;
		text-align: center;
		border-bottom: 1px solid #f5f5f5;
	}

	.category-item.active {
		background-color: #3C91FF;
		color: #fff;
		font-weight: bold;
	}

	.goods-container {
		width: 70%;
		overflow-y: auto;
		background-color: #fff;
	}

	.goods-list {
		padding: 15px;
	}

	.goods-item {
		margin-bottom: 15px;
		border: 1px solid #f5f5f5;
		border-radius: 10px;
		padding: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		position: relative;
		min-height: 60px;
	}

	.goods-img {
		width: 80px;
		height: 80px;
		border-radius: 10px;
		flex-shrink: 0;
	}

	.goods-details {
		flex: 1;
		margin-left: 10px;
		margin-right: 70px;
	}

	.goods-name {
		font-size: 15px;
		margin-bottom: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		max-height: 45px;
		line-height: 1.5;
	}

	.goods-price-info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.goods-vip-price {
		font-size: 14px;
		color: #FFD700;
		font-weight: bold;
	}

	.goods-original-price {
		font-size: 12px;
		color: #999;
	}

	.quantity-control-smaller {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	.btn-circle-minus {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #fff;
		border: 1px solid #ccc;
		color: #000;
		margin: 0 2px;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-circle-plus {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-color: #3C91FF;
		color: #fff;
		border: none;
		margin: 0 2px;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.quantity-smaller {
		font-size: 13px;
		width: 18px;
		text-align: center;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-top: 1px solid #f5f5f5;
		background-color: #fff;
		margin: 0;
		border-radius: 0;
		position: fixed;
		/* bottom: 0; */
		left: 0;
		right: 0;
		z-index: 999;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}

	.cart-info {
		display: flex;
		align-items: center;
	}

	.cart-icon {
		width: 35px;
		height: 35px;
		margin-right: 10px;
		position: relative;
		transition: transform 0.3s;
	}

	.cart-badge-outer {
		position: relative;
	}

	/* 购物车脉冲动画 */
	.pulse {
		animation: pulse 0.6s ease-in-out;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 购物车抖动动画 */
	.shake {
		animation: shake 0.3s ease-in-out;
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-5px) rotate(-5deg);
		}

		75% {
			transform: translateX(5px) rotate(5deg);
		}
	}

	/* 购物车徽章 */
	.van-badge__content {
		position: absolute;
		top: -10px;
		right: -10px;
		width: 24px;
		height: 24px;
		background-color: #ff4d4f;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	.total-info {
		display: flex;
		flex-direction: column;
	}

	.total-price-wrapper {
		display: flex;
		align-items: baseline;
		margin-bottom: 5px;
	}

	.total-price-title {
		font-size: 12px;
		color: #666;
		margin-right: 5px;
	}

	.total-price-value {
		font-size: 18px;
		font-weight: bold;
		color: #3C91FF;
	}

	.total-original-price-wrapper {
		display: flex;
		align-items: baseline;
		margin-bottom: 8px;
	}

	.total-original-price-title {
		font-size: 12px;
		color: #999;
		margin-right: 5px;
	}

	.total-original-price-value {
		font-size: 14px;
		color: #999;
		text-decoration: none;
	}

	.settle-btn-left {
		padding: 8px 15px;
		background-color: #3C91FF;
		color: #fff;
		border-radius: 5px;
		font-size: 14px;
		margin-right: 5px;
		min-width: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(60, 145, 255, 0.3);
	}

	.content {
		padding-bottom: 0;
	}

	.shop-page {
		padding-bottom: 60px;
	}

	.loading {
		text-align: center;
		padding: 20px 0;
		color: #999;
	}

	/* 添加商品动画样式 */
	.floating-item {
		position: fixed;
		z-index: 200;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.3);
		pointer-events: none;
		transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
			opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.animate-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
</style>